<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XML转M3U播放列表生成器</title>
    <style>
        *{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}
        body{background:linear-gradient(135deg,#1a2a6c,#b21f1f,#fdbb2d);color:#333;line-height:1.6;padding:20px;min-height:100vh}
        .container{max-width:1200px;margin:0 auto;background-color:rgba(255,255,255,0.95);border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.2);overflow:hidden}
        header{background:linear-gradient(to right,#2c3e50,#4a6491);color:white;padding:25px;text-align:center;border-bottom:5px solid #fdbb2d}
        h1{font-size:2.5rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,0.3)}
        .subtitle{font-size:1.2rem;opacity:0.9}
        .content{display:flex;flex-wrap:wrap;padding:20px}
        .input-section,.output-section{flex:1;min-width:300px;padding:20px}
        .input-section{border-right:2px dashed #ddd}
        h2{color:#2c3e50;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #fdbb2d}
        textarea{width:100%;height:300px;padding:15px;border:1px solid #ddd;border-radius:8px;font-family:monospace;font-size:14px;resize:vertical;margin-bottom:15px;background-color:#f9f9f9;box-shadow:inset 0 2px 5px rgba(0,0,0,0.05)}
        .controls{display:flex;gap:10px;margin-bottom:20px}
        button{flex:1;padding:12px;background:linear-gradient(to right,#3498db,#2980b9);color:white;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:bold;transition:all 0.3s ease;box-shadow:0 4px 6px rgba(0,0,0,0.1)}
        button:hover{transform:translateY(-2px);box-shadow:0 6px 8px rgba(0,0,0,0.15);background:linear-gradient(to right,#2980b9,#1f6396)}
        button:active{transform:translateY(0)}
        .example-btn{background:linear-gradient(to right,#27ae60,#219653)}
        .example-btn:hover{background:linear-gradient(to right,#219653,#1e8449)}
        .copy-btn{background:linear-gradient(to right,#9b59b6,#8e44ad)}
        .copy-btn:hover{background:linear-gradient(to right,#8e44ad,#7d3c98)}
        .output-section textarea{background-color:#2c3e50;color:#ecf0f1}
        .info-box{background-color:#e8f4fc;border-left:4px solid #3498db;padding:15px;border-radius:0 8px 8px 0;margin-top:20px}
        .info-box h3{color:#2980b9;margin-bottom:10px}
        .info-box ul{padding-left:20px}
        .info-box li{margin-bottom:8px}
        .channel-list{margin-top:20px;max-height:200px;overflow-y:auto;border:1px solid #ddd;border-radius:8px;padding:10px;background-color:#f9f9f9}
        .channel-item{padding:8px 12px;margin-bottom:8px;background-color:#eef2f7;border-radius:6px;border-left:4px solid #3498db}
        .stats{margin-top:15px;padding:10px;background-color:#f0f8ff;border-radius:8px;text-align:center}
        @media (max-width:768px){.input-section{border-right:none;border-bottom:2px dashed #ddd}h1{font-size:2rem}}
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>XML转M3U播放列表生成器</h1>
            <p class="subtitle">将XML格式的电视节目数据转换为M3U播放列表格式</p>
        </header>
        
        <div class="content">
            <div class="input-section">
                <h2>输入XML数据</h2>
                <textarea id="xmlInput" placeholder="在此粘贴XML格式的电视节目数据...">
<?xml version="1.0" encoding="UTF-8"?>
<tv generator-info-name="Tak" generator-info-url="https://github.com/develop202/migu_video/">
    <channel id="CCTV1综合">
        <display-name lang="zh">CCTV1综合</display-name>
    </channel>
    <channel id="CCTV2财经">
        <display-name lang="zh">CCTV2财经</display-name>
    </channel>
    <channel id="CCTV5体育">
        <display-name lang="zh">CCTV5体育</display-name>
    </channel>
    <programme channel="CCTV1综合" start="20251102000000 +0800" stop="20251102004000 +0800">
        <title lang="zh">城市风华录-4</title>
    </programme>
    <programme channel="CCTV1综合" start="20251102004000 +0800" stop="20251102012400 +0800">
        <title lang="zh">生活早参考-特别节目（生活圈）2025-228</title>
    </programme>
    <programme channel="CCTV1综合" start="20251102012400 +0800" stop="20251102015615 +0800">
        <title lang="zh">晚间新闻</title>
    </programme>
</tv></textarea>
                
                <div class="controls">
                    <button id="convertBtn">转换为M3U</button>
                    <button id="exampleBtn" class="example-btn">加载示例</button>
                    <button id="clearBtn">清空</button>
                </div>
                
                <div class="info-box">
                    <h3>使用说明</h3>
                    <ul>
                        <li>将XML格式的电视节目数据粘贴到左侧文本框</li>
                        <li>点击"转换为M3U"按钮生成播放列表</li>
                        <li>生成的M3U内容将显示在右侧</li>
                        <li>点击"复制M3U"按钮将结果复制到剪贴板</li>
                    </ul>
                </div>
            </div>
            
            <div class="output-section">
                <h2>M3U播放列表</h2>
                <textarea id="m3uOutput" placeholder="转换后的M3U内容将显示在这里..." readonly></textarea>
                
                <div class="controls">
                    <button id="copyBtn" class="copy-btn">复制M3U</button>
                </div>
                
                <div class="stats" id="stats">
                    频道总数: 0
                </div>
                
                <div class="channel-list">
                    <h3>检测到的频道</h3>
                    <div id="channelList"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const xmlInput = document.getElementById('xmlInput');
            const m3uOutput = document.getElementById('m3uOutput');
            const convertBtn = document.getElementById('convertBtn');
            const exampleBtn = document.getElementById('exampleBtn');
            const clearBtn = document.getElementById('clearBtn');
            const copyBtn = document.getElementById('copyBtn');
            const channelList = document.getElementById('channelList');
            const stats = document.getElementById('stats');
            
            // 转换按钮点击事件
            convertBtn.addEventListener('click', function() {
                const xmlContent = xmlInput.value.trim();
                if (!xmlContent) {
                    alert('请输入XML内容！');
                    return;
                }
                
                try {
                    const result = convertXmlToM3u(xmlContent);
                    m3uOutput.value = result.m3u;
                    updateChannelList(result.channels);
                    stats.textContent = `频道总数: ${result.channels.length}`;
                } catch (error) {
                    alert('转换失败：' + error.message);
                    console.error(error);
                }
            });
            
            // 示例按钮点击事件
            exampleBtn.addEventListener('click', function() {
                xmlInput.value = `<?xml version="1.0" encoding="UTF-8"?>
<tv generator-info-name="Tak" generator-info-url="https://github.com/develop202/migu_video/">
    <channel id="CCTV1综合">
        <display-name lang="zh">CCTV1综合</display-name>
    </channel>
    <channel id="CCTV2财经">
        <display-name lang="zh">CCTV2财经</display-name>
    </channel>
    <channel id="CCTV5体育">
        <display-name lang="zh">CCTV5体育</display-name>
    </channel>
    <programme channel="CCTV1综合" start="20251102000000 +0800" stop="20251102004000 +0800">
        <title lang="zh">城市风华录-4</title>
    </programme>
    <programme channel="CCTV1综合" start="20251102004000 +0800" stop="20251102012400 +0800">
        <title lang="zh">生活早参考-特别节目（生活圈）2025-228</title>
    </programme>
    <programme channel="CCTV1综合" start="20251102012400 +0800" stop="20251102015615 +0800">
        <title lang="zh">晚间新闻</title>
    </programme>
</tv>`;
            });
            
            // 清空按钮点击事件
            clearBtn.addEventListener('click', function() {
                xmlInput.value = '';
                m3uOutput.value = '';
                channelList.innerHTML = '';
                stats.textContent = '频道总数: 0';
            });
            
            // 复制按钮点击事件
            copyBtn.addEventListener('click', function() {
                if (!m3uOutput.value) {
                    alert('没有内容可复制！');
                    return;
                }
                
                m3uOutput.select();
                document.execCommand('copy');
                alert('M3U内容已复制到剪贴板！');
            });
            
            // 转换XML为M3U格式
            function convertXmlToM3u(xmlContent) {
                const parser = new DOMParser();
                const xmlDoc = parser.parseFromString(xmlContent, 'text/xml');
                
                // 检查XML是否有效
                if (xmlDoc.getElementsByTagName('parsererror').length > 0) {
                    throw new Error('XML格式错误，请检查输入内容');
                }
                
                const channels = xmlDoc.getElementsByTagName('channel');
                const programmes = xmlDoc.getElementsByTagName('programme');
                
                if (channels.length === 0) {
                    throw new Error('未找到频道信息');
                }
                
                // 构建M3U头部
                let m3uContent = '#EXTM3U x-tvg-url="https://raw.githubusercontent.com/mytv-android/iptv-api/refs/heads/master/output/epg/epg.gz"\n\n';
                
                // 存储频道信息
                const channelMap = {};
                const channelList = [];
                
                // 处理频道
                for (let i = 0; i < channels.length; i++) {
                    const channel = channels[i];
                    const channelId = channel.getAttribute('id');
                    const displayName = channel.getElementsByTagName('display-name')[0].textContent;
                    
                    channelMap[channelId] = displayName;
                    channelList.push({
                        id: channelId,
                        name: displayName
                    });
                    
                    // 为每个频道生成M3U条目
                    m3uContent += `#EXTINF:-1 tvg-name="${channelId}" tvg-logo="https://gitee.com/wheyu/share/raw/master/tvlogo/${channelId}.png" group-title="📺央视频道",${displayName}\n`;
                    m3uContent += `http://kkk.jjjj.jiduo.me/api.php?n=tttt&id=${generateRandomId()}&tk=922ba46651d3\n\n`;
                }
                
                return {
                    m3u: m3uContent,
                    channels: channelList
                };
            }
            
            // 生成随机ID
            function generateRandomId() {
                const chars = '0123456789abcdef';
                let result = '';
                for (let i = 0; i < 6; i++) {
                    result += chars.charAt(Math.floor(Math.random() * chars.length));
                }
                return result;
            }
            
            // 更新频道列表显示
            function updateChannelList(channels) {
                channelList.innerHTML = '';
                
                channels.forEach(channel => {
                    const channelItem = document.createElement('div');
                    channelItem.className = 'channel-item';
                    channelItem.textContent = `${channel.name} (${channel.id})`;
                    channelList.appendChild(channelItem);
                });
            }
            
            // 初始加载示例
            exampleBtn.click();
            convertBtn.click();
        });
    </script>
</body>
</html>